<template>
	<view class="content-service-log">
		<uni-nav-bar :fixed="true" status-bar left-icon="left" title="服务记录" @clickLeft="back" style="border: none"
			:border="false" />
		<view class="content-control">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				style="background-color: #fff;"></uni-segmented-control>
		</view>

		<view class="content">
			<view v-if="dataList.length > 0">
				<!-- <view class="list-box" v-for="(item,index) in dataList" :key="index"> -->
				<view class="list-box" v-for="(item,index) in dataList" :key="index">
					<view class="list-box-title">
						<view><text class="title-label">权益卡：</text>{{ item.equityConfigName }} </view>
						<view><text class="title-label">服务名称：</text>{{ item.equityName }}</view>
					</view>
					<view style="margin: 0 0 24rpx 0;">
						<text class="title-label">服务状态：</text>
						<uni-tag :inverted="true"
							:text="item.serviceState === 0 ? '已预约' : item.serviceState === 3 ? '已完成' : (item.serviceState === 1 || item.serviceState === 2) ? '处理中' : '已取消'"
							:type="item.serviceState === 0 ? 'primary' : item.serviceState === 3 ? 'success' : (item.serviceState === 1 || item.serviceState === 2) ? 'warning' : 'error'" />

					</view>
					<view class="list-box-content">
						<view v-for="(items,indexs) in item.applyContentObj.infos" :key="indexs"
							style="margin-bottom: 12rpx;"><text
								class="title-label">{{items.label}}：</text>{{ items.value }}</view>
					</view>
					<view class="btn-box" v-if="current == 1">
						<button size="mini" class="button-style" :plain="true" type="primary"
							@tap="editOrder(item)" v-if="item.equityConfigObj.EQUITY_PARAMS_SERVICE === 'FORM_SUBMIT'">修改</button>
						<button size="mini" class="button-style" :plain="true" type="warn"
							@tap="chexiaoOrder(item)">撤销</button>
					</view>
				</view>
			</view>
			<view class="service-nodata" v-else>
				<view style="text-align: center">
					<img src="/static/service/nodata.svg" alt="" srcset="" />
				</view>
				<view class="service-nodata-text">
					暂无服务记录
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
	} from "vue";
	import {
		queryUserOrder,
		orderRevoke
	} from "../../api/base.js";
	import {
		errorStatus,
		loginAuthorize
	} from "../../api/hook.js";
	const items = ref(['全部', '已预约', '处理中', '已完成', '已取消']);
	const current = ref(0);
	const dataList = ref([]);
	const back = () => {
		uni.switchTab({
			url: "/pages/mine/mine"
		})
	}
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
			dataList.value = [];
			loadingData(current.value === 0 ? '-1,0,1,2,3' : current.value === 1 ? '0' : current.value === 2 ? '1,2' :
				current.value === 3 ? "3" : '-1')
		}
	}

	onMounted(() => {
		try {
			const instance = getCurrentInstance().proxy;
			const eventChannel = instance.getOpenerEventChannel();
			eventChannel.on("activeData", function(data) {
				current.value = data.state === '-1,0,1,2,3' ? 0 : data.state === '0' ? 1 : data.state ===
					'1,2' ? 2 : data.state === '3' ? 3 : 4
				loadingData(data.state)
			})
		} catch (error) {
			current.value = 1;
			loadingData('0');
		}
	});

	const loadingData = (state = '-1,0,1,2,3') => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});
		queryUserOrder(state).then(async (res) => {
			if (res.data.state === "SUCCESS") {
				uni.hideLoading();
				dataList.value = res.data.list.map(item => {
					item.applyContentObj = JSON.parse(item.applyContent);
					item.userName = res.data.customer.name;
					item.equityConfigObj = JSON.parse(item.equityConfig).find(e => e.EQUITY_TYPE === item.equityType);
					return item
				})
			} else {
				if (res.data.state === "WX_USER_NOT_LOGIN") {
					await loginAuthorize();
					loadingData(state);
				} else {
					uni.showToast({
						title: errorStatus[res.data.state] || "查询失败！",
						icon: "error"
					})
				}
			}
		})
	}

	const chexiaoOrder = async (row) => {
		uni.showModal({
			title: '提示',
			content: '是否撤销此预定订单？',
			success: function(res) {
				if (res.confirm) {
					orderRevoke({
						orderId: row.id
					}).then(async (res) => {
						if (res.data.state === "REVOKE_SUCCESS") {
							uni.showToast({
								title: "撤销成功！",
								icon: "success"
							})
							loadingData(current.value === 0 ? '-1,0,1,2,3' : current
								.value === 1 ? '0' : current.value === 2 ? '1,2' :
								current.value === 3 ? "3" : '-1');
						} else {
							if (res.data.state === "WX_USER_NOT_LOGIN") {
								await loginAuthorize();
								chexiaoOrder(row);
							} else {
								uni.showToast({
									title: errorStatus[res.data.state] || "撤销失败！",
									icon: "error"
								})
							}
						}

					})

				}
				//  else if (res.cancel) {
				// 	console.log('用户点击取消');
				// }
			}
		});
	}
	// const serviceInfo = red(null);

	const editOrder = (row) => {
		let serviceInfo = JSON.parse(row.equityConfig).find(e => e.EQUITY_TYPE === row.equityType);
		let equityUse = JSON.parse(row.equityUse);
		let applyContent = JSON.parse(row.applyContent);
		uni.navigateTo({
			url: "/pageA/service-details/appointmentForm",
			success: function(res) {
				// 通过eventChannel向打开页面传送数据
				res.eventChannel.emit("appointmentData", {
					serviceInfo: serviceInfo,
					cardId: row.equitycardId,
					equityType: row.equityType,
					equityUse: equityUse,
					userName: row.userName,
					applyContent: applyContent,
					orderId: row.id,
					cardInfo: row
				});
			},
		});
	};
</script>

<style scoped>
	.content {
		/* margin-top: 88rpx; */
		height: calc(100vh - 220rpx);
		overflow: auto;
	}

	.service-nodata-text {
		text-align: center;
	}

	.list-box {
		padding: 24rpx;
		border-bottom: 1rpx solid #cdcdcd;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		background-color: #fff;
		margin-top: 24rpx;
	}

	.list-box-title {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin-bottom: 24rpx;

	}

	.title-label {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.65);
	}

	.list-box-content {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		color: rgba(0, 0, 0, 0.45);
		font-size: 24rpx;
	}

	.content-service-log {
		background-color: #f4f4f4;
		min-height: 100vh;
		position: relative;
	}

	.content-control {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		/* position: absolute;
		top: 116rpx;
		left: 0; */
	}

	.btn-box {
		margin-top: 12px;
		text-align: right;
	}

	.button-style {
		margin: 0 12rpx;
	}
</style>